<template>
  <div class="flex-container">
    <div class="right">
      <div class="header">
        <div class="header_left">
          <el-input
            placeholder="请输入巡查点名称"
            v-model="search_val"
            style="width: 280px; margin-right: 15px"
            size="small"
            maxlength="20"
            clearable
            @clear="clearInput"
            class="el_input"
          >
            <el-button
              slot="append"
              :icon="loadingSearch ? 'el-icon-loading' : 'el-icon-search'"
              @click="searchClick"
            >
            </el-button>
          </el-input>
          <el-popover
            placement="bottom"
            width="460"
            trigger="click"
            popper-class="popover"
            size="small"
            v-model="showPopover"
          >
            <div>
              <el-form
                label-width="70px"
                style="margin: 20px 0"
                class="popover_from"
              >
                <el-row
                  v-if="
                    user.roleName === 'TENANT_ADMIN' ||
                    user.roleName === 'ORG_ADMIN'
                  "
                >
                  <el-col :span="24">
                    <el-form-item size="small" label="组织机构">
                      <TreeSearch
                        style="width: 360px; margin-left: 15px"
                        @changeOrgId="changeOrgId"
                        ref="refTreeSearch"
                      >
                      </TreeSearch>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item size="small" label="联网单位">
                  <el-select
                    size="small"
                    style="width: 360px; margin-left: 15px"
                    clearable
                    v-loadMore="loadMore"
                    @change="changeunitId"
                    v-model="selectedValue"
                    placeholder="请选择联网单位"
                    filterable
                    remote
                    :remote-method="remoteMethod"
                    @clear="handleClear(2)"
                  >
                    <el-option
                      v-for="item in orgList"
                      :label="item.orgName"
                      :value="item.id"
                      :key="item.id"
                    >
                    </el-option>
                    <div
                      class="div_box"
                      v-loading="loading"
                      :style="loading ? '' : 'display: none;'"
                    ></div>
                  </el-select>
                </el-form-item>
                <el-row>
                  <el-col :span="24">
                    <el-form-item size="small" label="建筑物">
                      <el-select
                        size="small"
                        style="width: 360px; margin-left: 15px"
                        clearable
                        @change="changeBuildings"
                        @keyup.enter.native="searchList"
                        v-loadMore="loadBuildings"
                        v-model="buildingsName"
                        placeholder="请选择建筑物"
                        filterable
                        remote
                        :remote-method="remoteBuildings"
                        @clear="handleClear(3)"
                      >
                        <el-option
                          v-for="item in buildings"
                          :label="item.name"
                          :value="item.id"
                          :key="item.id"
                        >
                        </el-option>
                        <div
                          class="div_box"
                          v-loading="loading2"
                          :style="loading2 ? '' : 'display: none;'"
                        ></div>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item size="small" label="楼层">
                      <el-select
                        size="small"
                        style="width: 360px; margin-left: 15px"
                        clearable
                        @change="changeFloors"
                        @keyup.enter.native="searchList"
                        v-loadMore="loadFloors"
                        v-model="floorsName"
                        placeholder="请选择楼层"
                        filterable
                        remote
                        :remote-method="remoteFloors"
                        @clear="handleClear(4)"
                      >
                        <el-option
                          v-for="item in floors"
                          :label="item.name"
                          :value="item.id"
                          :key="item.id"
                        >
                        </el-option>
                        <div
                          class="div_box"
                          v-loading="loading3"
                          :style="loading3 ? '' : 'display: none;'"
                        ></div>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item size="small" label="安装点">
                      <el-select
                        size="small"
                        style="width: 360px; margin-left: 15px"
                        clearable
                        @change="changeSpaces"
                        v-loadMore="loadSpaces"
                        v-model="spacesName"
                        placeholder="请选择安装点"
                        filterable
                        remote
                        :remote-method="remoteSpaces"
                        @clear="handleClear(5)"
                      >
                        <el-option
                          v-for="item in spaces"
                          :label="item.name"
                          :value="item.id"
                          :key="item.id"
                        >
                        </el-option>
                        <div
                          class="div_box"
                          v-loading="loading4"
                          :style="loading4 ? '' : 'display: none;'"
                        ></div>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item size="small" label="设施状态">
                      <el-select
                        size="small"
                        style="width: 360px; margin-left: 15px"
                        clearable
                        multiple
                        v-model="searchForm.status"
                        placeholder="请选择设施状态"
                      >
                        <el-option
                          v-for="item in statusList"
                          :label="item.name"
                          :value="item.id"
                          :key="item.id"
                        >
                        </el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-row>
                  <el-col :span="24">
                    <el-form-item size="small" label="有效期">
                      <el-date-picker
                        v-model.trim="timeArr"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始时间"
                        end-placeholder="结束时间"
                        value-format="yyyy-MM-dd HH:mm:ss"
                        style="width: 360px; margin-left: 15px"
                        clearable
                      >
                      </el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-row>
              </el-form>
              <div class="footer" style="text-align: right">
                <el-button
                  size="small"
                  @click="resetClick"
                  class="cancel-button"
                  >重 置</el-button
                >
                <el-button
                  size="small"
                  @click="searchClick1"
                  class="confirm-button"
                  >确 定</el-button
                >
              </div>
            </div>
            <el-button
              size="small"
              slot="reference"
              type="primary"
              :class="hasSearch ? 'elhasSearch elhasSearch2' : 'elhasSearch2'"
            >
              高级搜索<i
                class="el-icon-search"
                style="margin-left: 5px; font-size: 12px"
              ></i
            ></el-button>
          </el-popover>
        </div>
        <div class="header_right">
          <el-button
            class="el_button"
            size="small"
            icon="el-icon-plus"
            @click="addClick"
          >
            新增
          </el-button>
          <el-button
            class="el_button"
            size="small"
            icon="el-icon-delete"
            type="info"
            style="margin-left: 15px"
            @click="onDelClickBatch"
          >
            删除
          </el-button>
          <el-dropdown @command="onDropdown">
            <el-button type="primary" size="small" style="margin-left: 15px">
              更多操作<i class="el-icon-arrow-down el-icon--right"></i>
            </el-button>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="import">导入</el-dropdown-item>
              <el-dropdown-item command="export">导出</el-dropdown-item>
              <el-dropdown-item command="importRecord"
                >导入记录</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
          <!-- <el-button
            class="el_button"
            size="small"
            icon="el-icon-bottom"
            type="info"
            style="margin-left: 15px"
            @click="onStateBatch"
          >
            导出
          </el-button> -->
        </div>
      </div>
      <div class="content">
        <el-table
          :data="dataList"
          class="table"
          :header-cell-style="headerStyle"
          ref="refTable"
          row-key="id"
          @selection-change="batchSelect"
        >
          <el-table-column
            align="center"
            type="selection"
            :reserve-selection="true"
            width="60"
          ></el-table-column>
          <el-table-column
            align="center"
            label="序号"
            type="index"
            width="80"
            height="30"
            :index="indexMethod"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="pointName"
            label="巡查点名称"
            min-width="100"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="center"
            prop="site"
            label="巡查项分类"
            min-width="150"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <span
                v-for="(item, index) in scope.row.pointItemList"
                :key="item.id"
              >
                {{ item.name
                }}<span v-if="index != scope.row.pointItemList.length - 1"
                  >,</span
                >
              </span>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="address"
            label="所属场所"
            min-width="100"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="center"
            prop="tagNumber"
            label="标签编号"
            min-width="100"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="center"
            prop="clockInType"
            label="打卡类型"
            width="100"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              <span v-if="scope.row.clockInType == 0">全部</span>
              <span v-if="scope.row.clockInType == 1">扫码</span>
              <span v-else-if="scope.row.clockInType == 2">NFC</span>
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作" width="150">
            <template slot-scope="scope">
              <el-tooltip
                class="item"
                effect="dark"
                content="编辑"
                placement="bottom"
              >
                <i
                  @click="editClick(scope.row)"
                  class="iconfont tianxie tableBtnIcon"
                ></i>
              </el-tooltip>
              <el-tooltip
                class="item"
                effect="dark"
                content="删除"
                placement="bottom"
              >
                <i
                  @click="onDel(scope.row.id)"
                  class="iconfont shanchu tableBtnIcon"
                ></i>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="page"
          :limit.sync="limit"
          :pageSizes="[10, 20, 30, 50]"
          @pagination="getDataList"
          class="pagination"
        />
      </div>
    </div>
    <div
      class="custom-dialog"
      v-show="isShowRuleOperate"
      :style="{ 'z-index': isShowRuleOperate ? 1 : -1 }"
    >
      <fpdOperate
        ref="refRuleOperate"
        :showIndex="showIndex"
        :editData="editData"
      ></fpdOperate>
    </div>
    <!-- <div
        class="custom-dialog"
        v-if="isShowRecord"
        :style="{ 'z-index': isShowRecord ? 1 : -1 }"
      >
        <executeRecord ref="refExecuteRecord" :logId="logId"></executeRecord>
      </div>
      <addRule ref="refaddRule" :editData="editData"></addRule>
      <logDialog ref="reflogDialog" :logId="logId"></logDialog> -->
  </div>
</template>

<script>
import { reqPatrolPointPage, reqPatrolPointDel } from "@api/patrol.js";
import Pagination from "@components/Pagination.vue";
import tableStyleMixin from "@mixin/table-style";
import TreeSearch from "@components/TreeSearch.vue";
import fpdOperate from "./components/fpdOperate.vue";
//   import addRule from "./components/addRule.vue";
//   import executeRecord from "./components/executeRecord.vue";
//   import logDialog from "./components/logDialog.vue";
import { mapState } from "vuex";
import loadMore from "@mixin/loadMore";
import advanceSearchMixin from "./mixins/advanceSearch.js";

export default {
  name: "",
  // components: { Pagination, addRule, logDialog, fpdOperate, executeRecord },
  components: { Pagination, TreeSearch, fpdOperate },
  mixins: [tableStyleMixin, loadMore, advanceSearchMixin],
  data() {
    return {
      state: "",
      loadingSearch: false, //查询按钮loading
      dataList: [
        {
          id: "67f8ce35ed9c5303dacea59a",
          companyId: 288711,
          userId: 361997,
          storeId: "1101082925990707201",
          orgCode: "001100100",
          pointName: "消防通道",
          site: "广东省深圳市市辖区",
          tagNumber: "456789123456",
          clockInType: 2,
          patrolItemsList: [
            {
              id: "67f8cdc9ed9c5303dacea599",
              companyId: null,
              userId: null,
              itemsName: "消防通道",
              isDefaults: 1,
              patrolCategory: [
                {
                  id: "553762261773193216",
                  categoryName: "消防通道是否可正常行走",
                  itemsName: null,
                  sort: 1,
                  remarks: "测试",
                  describe: null,
                  pictures: null,
                  status: null,
                },
              ],
              workOrder: null,
              hiddenNum: null,
              createTime: null,
              updateTime: null,
            },
            {
              id: "67fc6a13ed9c5303dacead4d",
              companyId: null,
              userId: null,
              itemsName: "rrqwr2",
              isDefaults: 1,
              patrolCategory: [
                {
                  id: "554754709651591168",
                  categoryName: "wr",
                  itemsName: null,
                  sort: 1,
                  remarks: null,
                  describe: null,
                  pictures: null,
                  status: null,
                },
              ],
              workOrder: null,
              hiddenNum: null,
              createTime: null,
              updateTime: null,
            },
            {
              id: "6411387a0f460000c000692d",
              companyId: null,
              userId: null,
              itemsName: "消防泵房",
              isDefaults: 0,
              patrolCategory: [
                {
                  id: "211",
                  categoryName: "消防泵房配电柜供电是否正常",
                  itemsName: null,
                  sort: 1,
                  remarks: null,
                  describe: null,
                  pictures: null,
                  status: null,
                },
                {
                  id: "212",
                  categoryName: "消防泵房事故应急照明是否正常",
                  itemsName: null,
                  sort: 2,
                  remarks: null,
                  describe: null,
                  pictures: null,
                  status: null,
                },
              ],
              workOrder: null,
              hiddenNum: null,
              createTime: null,
              updateTime: null,
            },
            {
              id: "6411387a0f460000c0006932",
              companyId: null,
              userId: null,
              itemsName: "发电机房",
              isDefaults: 0,
              patrolCategory: [
                {
                  id: "191",
                  categoryName: "发电机房自动灭火设施是否处于自动状态",
                  itemsName: null,
                  sort: 1,
                  remarks: null,
                  describe: null,
                  pictures: null,
                  status: null,
                },
                {
                  id: "192",
                  categoryName: "发电机房储油间防火措施是否符合要求",
                  itemsName: null,
                  sort: 2,
                  remarks: null,
                  describe: null,
                  pictures: null,
                  status: null,
                },
              ],
              workOrder: null,
              hiddenNum: null,
              createTime: null,
              updateTime: null,
            },
            {
              id: "6411387a0f460000c0006928",
              companyId: null,
              userId: null,
              itemsName: "配电房",
              isDefaults: 0,
              patrolCategory: [
                {
                  id: "171",
                  categoryName: "配电房灭火器材是否正常有效",
                  itemsName: null,
                  sort: 1,
                  remarks: null,
                  describe: null,
                  pictures: null,
                  status: null,
                },
              ],
              workOrder: null,
              hiddenNum: null,
              createTime: null,
              updateTime: null,
            },
          ],
          patrolItemsNames: "消防通道,rrqwr2,消防泵房,发电机房,配电房",
          patrolPerson: [
            {
              userId: 361997,
              name: "系统管理员",
            },
            {
              userId: 385457,
              name: "刘先生",
            },
          ],
          createTime: "2025-04-11T08:09:25.180+00:00",
          updateTime: "2025-04-15T02:09:42.605+00:00",
          status: null,
          orderNum: null,
          storeName: "默认场所",
          isCompleted: null,
          isSaved: null,
          completeNum: null,
        },
      ],
      searchForm: {
        facilityName: "",
        fireOsTypes: [],
        facilityTypes: [],
        status: [],
        orgId: "",
        spaceId: "",
        buildingId: "",
        floorId: "",
        userId: "",
        roleName: "",
        startTime: "",
        endTime: "",
        unitId: "",
      },
      search_val: "",
      limit: 10,
      page: 1,
      total: 0,
      showIndex: 0,
      editData: {}, //修改数据
      type: "",
      projectList: [], //单位数据
      sysInstanceIndex: 1,
      sysInstanceTotalPages: 10,
      logId: "",
      isShowRuleOperate: false,

      batchDataList: [],
      statusList: [
        { name: "正常", id: 1 },
        { name: "将报废", id: 2 },
        { name: "报废", id: 0 },
      ],
      // 执行记录
      isShowRecord: false,

      orgList: [],
      orgId: "",
      loading: false,
      orgName: "",
      selectedValue: "",

      showPopover: false, //v-model默认值是false, click激活变成true
      hasSearch: false,
    };
  },
  computed: {
    ...mapState(["user"]),
  },
  created() {},
  mounted() {
    this.getDataList();
  },
  methods: {
    // 序号
    indexMethod(index) {
      return index + 1 + (this.page - 1) * this.limit;
    },

    // 获取列表
    async getDataList() {
      // this.searchForm.tenantId = this.user.tenantId;
      // this.searchForm.orgId = this.searchForm.orgId;
      // this.searchForm.unitId = this.searchForm.unitId;
      // this.searchForm.userId = this.user.userId;
      // this.searchForm.roleName = this.user.roleName;
      // this.searchForm.startTime = this.timeArr[0];
      // this.searchForm.endTime = this.timeArr[1];
      const res = await reqPatrolPointPage(this.page, this.limit, {
        pointName: this.search_val,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      // this.hasSearch =
      //   this.searchForm.orgId ||
      //   this.searchForm.unitId ||
      //   this.searchForm.buildingId ||
      //   this.searchForm.floorId ||
      //   this.searchForm.status.length ||
      //   this.searchForm.startTime ||
      //   this.searchForm.endTime
      //     ? true
      //     : false;
      let { rows, total } = res.data;
      this.dataList = rows;
      this.total = total;
    },

    // 更多操作回调事件
    async onDropdown(e) {
      switch (e) {
        case "import":
          break;
        case "export":
          break;
        case "importRecord":
          break;
      }
    },

    // 点击复选框触发，可跨分页选择
    batchSelect(arr) {
      this.batchDataList = arr;
    },

    // 搜索
    async searchClick() {
      this.page = 1;
      this.limit = 10;
      this.loadingSearch = true;
      await this.getDataList();
      this.loadingSearch = false;
    },
    // 清空
    clearInput() {
      this.page = 1;
      this.limit = 10;
      this.getDataList();
    },
    // 清空复选框√√
    clearSelections() {
      this.$refs.refTable.clearSelection();
    },
    getInitDataList() {
      this.page = 1;
      this.limit = 10;
      this.getDataList();
    },
    // 清除请求
    nameClear() {
      this.getInitDataList();
    },
    // 新增
    addClick() {
      this.isShowRuleOperate = true;
      this.showIndex = this.showIndex + 1;
      this.editData = {};
    },
    // 编辑
    editClick(row) {
      this.showIndex = this.showIndex + 1;
      this.editData = JSON.parse(JSON.stringify(row));
      this.isShowRuleOperate = true;
    },
    // 日志
    handleViewLog(id) {
      this.logId = id;
      this.$refs.reflogDialog.dialogVisible = true;
    },
    // 执行记录
    onRecord() {
      this.isShowRecord = true;
      this.$nextTick(() => {
        this.$refs.refExecuteRecord.page = 1;
        this.$refs.refExecuteRecord.getData();
      });
    },

    // 批量删除
    async onDelClickBatch() {
      console.log(this.batchDataList, "this.batchDataList");
      if (!this.batchDataList.length)
        return this.$modal.notifyWarning("请选择要删除的消防设施");
      const result = await this.$confirm("确定删除所选的消防设施吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).catch(() => {});
      if (result !== "confirm") return;
      console.log(
        this.batchDataList.map((item) => item.id),
        "this.batchDataList.map((item) => item.id)"
      );
      // let res = await reqFireFacilityBatchDel(
      //   this.batchDataList.map((item) => item.id)
      // );
      // if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      // this.$modal.notifySuccess("操作成功");
      // this.$refs.refTable.clearSelection();
      // this.getInitDataList();
    },

    // 单个删除
    async onDel(id) {
      const result = await this.$confirm("确定删除所选项吗?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).catch(() => {});
      if (result !== "confirm") return;
      const res = await reqPatrolPointDel(id);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.$modal.notifySuccess("删除成功");
      this.getInitDataList();
    },

    // 导出
    async onStateBatch() {
      // const res = await reqFireFacilityExport(
      //   this.page,
      //   this.limit,
      //   this.searchForm
      // );
      // if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      // this.$modal.notifySuccess("导出成功,可在任务管理页面查看");
    },
  },
};
</script>

<style scoped lang="less">
@import url("~@views/style/tablePage.less");
@import url("./inspPoints.less");
</style>
